<template>
	<div class="system-box">
		<div class="system-left">
			<div class="system-title">
				<img src="@img/main/path.png" />
				<span>系统管理</span>
			</div>
			<div class="system-tab">
				<div
					v-for="item in sideBarRouter"
					:key="item.path"
					:class="{ active: route.fullPath == item.path }"
					class="bl"
					@click="switchTab(item.path)"
				>
					<div class="left">
						<img :src="getImageUrl(item.img)" />
						<span>{{ item.name }}</span>
					</div>
					<img src="@img/main/arrow-right.png" alt="" />
				</div>
			</div>
		</div>
		<div class="system-right">
			<router-view />
		</div>
	</div>
</template>

<script setup lang="ts">
const router = useRouter();
const route = useRoute();
const sideBarRouter = [
	{
		path: "/main/ai-system/user",
		name: "用户管理",
		img: "user.png",
	},
	// {
	// 	path: "/main/ai-system/role",
	// 	name: "角色管理",
	// 	img: "role.png",
	// },
	{
		path: "/main/ai-system/log",
		name: "操作日志",
		img: "log.png",
	},
];
function getImageUrl(name: string) {
	return new URL(`../../../assets/images/main/${name}`, import.meta.url).href;
}
function switchTab(path: string) {
	if (route.fullPath == path) return;
	router.push(path);
}
</script>

<style lang="scss" scoped>
@import "@/index.scss";
.system-box {
	@apply absolute left-0 right-0 z-20 m-auto flex h-full;
	top: 100px;
	width: calc(100% - 12px - 12px);
	height: calc(100% - 100px - 38px);
}
.system-left {
	@apply mr-3 flex flex-col;
	// top: 100px;
	min-width: 238px;
	padding: 0 9px;
	background: #0a2641;
	border-radius: 4px;
	border: 1px solid #376699;
	.system-title {
		@apply flex items-center;
		height: 44px;
		img {
			width: 16px;
			height: 16px;
			margin-left: 3px;
			margin-right: 8px;
		}
		span {
			@include art-font(18px, #ffffff);
		}
	}
	.system-tab {
		@apply flex h-full flex-col items-center;
		box-sizing: border-box;
		padding: 0 6px;
		padding-top: 4px;
		background: linear-gradient(180deg, #1c4978 0%, #062a4e 100%);
		border-top: 1px solid #5ca1d7;
		.bl {
			@apply flex h-12 w-full items-center justify-between;
			margin-top: 8px;
			box-sizing: border-box;
			padding: 0 7px;
			border-bottom: 1px solid #76c6ff;

			&:first-child {
				margin-top: 0px;
			}
			.left {
				display: flex;
				height: 21px;
				align-items: center;
				&:last-child {
					justify-content: end;
				}
			}
			img {
				margin-right: 11px;
			}
			span,
			.el-icon-arrow-right {
				height: 18px;
				font-size: 15px;
				font-weight: 500;
				color: #ffffff;
				line-height: 18px;
			}
			.el-icon-arrow-right {
				width: 20px;
			}
			&:hover,
			&.active {
				background: rgba(255, 255, 255, 0.15);
				cursor: pointer;
			}
		}
	}
}
.system-right {
	@apply w-full;
	background: #0a2641;
	border-radius: 4px;
	border: 1px solid #376699;
	padding: 20px 20px 36px 20px;
}
</style>
